<template>
  <div id="container1">
    <div class="container-cont">
      <div id="myMap">
        <baidu-map :center="center" :zoom="zoom" @ready="handler" style="height:100%"
          :map-click="false"  :scroll-wheel-zoom='true'>

         </baidu-map>
      </div>

      <!--台站列表-->
      <div id ="myInfo">
        <!--<el-row :gutter="20" style="padding: 20px 0; margin: 20px 0; border: 1px solid #ccc; border-radius: 4px">-->
          <!--&lt;!&ndash;<el-col :span="3">&ndash;&gt;-->
            <!--&lt;!&ndash;<el-input placeholder="查询" v-model="address"></el-input>&ndash;&gt;-->
          <!--&lt;!&ndash;</el-col>&ndash;&gt;-->
          <!--<el-col :span="21">-->
            <!--<el-button-->
              <!--type="primary"-->
              <!--@click="toggle('polygonPath')"-->
            <!--&gt;{{ polygonPath.editing ? '重新绘制' : '开始绘制' }}</el-button>-->
            <!--<el-button type="primary" @click="save">保存</el-button>-->
          <!--</el-col>-->
        <!--</el-row>-->
        <!--<div id = "filter">-->
            <!--筛选条件：-->
            <!--<input type="button" name="selectAll" value="全选" @click="selectAllItem()" />  -->
            <!--<input type="button" name="deleteAll" value="全不选" @click="deleteAllItem()" />  -->
            <!--<input type="button" name="selectOther" value="反选" @click="selectOtherItem()" />-->
            <!--<input type="button" value="确认重选" onclick="selectedItem()" />-->
            <!--<input type="checkbox" name="hobby" value="2" checked = "checked"/>形变  -->
            <!--<input type="checkbox" name="hobby" value="3" checked/>地电地磁  -->
            <!--<input type="checkbox" name="hobby" value="4" checked/>地下流体  -->
            <!--<input type="checkbox" name="hobby" value="9" checked/>辅助流体  -->
        <!--</div>-->
        <!--<div id = "form1" >-->
            <!--<div id = "form">-->
            <!--<table id = "stationtable">-->
                <!--<thead>-->
                <!--&lt;!&ndash; 创建表格头 &ndash;&gt;-->
                <!--<tr id="list">-->
                    <!--<th><input type="checkbox" id="checkall" onclick="checkAll(this)" />全选</th>-->
                    <!--<th>所属区域</th>-->
                    <!--<th>所属台站</th>-->
                    <!--<th>测点编码</th>-->
                    <!--<th>仪器名称</th>-->
                    <!--<th>测项名称</th>-->
                <!--</tr>-->
                <!--&lt;!&ndash; 添加全部删除按钮， &ndash;&gt;-->
                <!--&lt;!&ndash;<tr>&ndash;&gt;-->
                    <!--&lt;!&ndash;<td ></td>&ndash;&gt;-->
                    <!--&lt;!&ndash;&lt;!&ndash;<td ><input type="button" id="repaint" value="重新画图" onclick="delAll()"></td>&ndash;&gt;&ndash;&gt;-->
                <!--&lt;!&ndash;</tr>&ndash;&gt;-->
                <!--</thead>-->
                <!--<tbody id="listbody"></tbody>-->
            <!--</table>-->
            <!--</div>-->

        <!--</div>-->
    </div>
    </div>

     <!--数据参数选择框:开始时间，时间轴个数，采样方式，采样率，-->
    <div id="mySel">
      <br/>
      <el-form>
        <el-row :gutter="5">
          <el-col :span="6">
            <div class="grid-content bg-purple">
              <!--<span class="demonstration">开始时间</span>-->
              <el-date-picker
                v-model="value2"
                type="datetime"
                placeholder="选择开始日期时间"
                align="right"
                :picker-options="pickerOptions">
              </el-date-picker>
            </div>
          </el-col>

          <el-col :span="6">
            <div class="grid-content bg-purple">
              <el-input
                placeholder="请输入时间轴个数"
                v-model="timepoint"
                clearable>
              </el-input>
            </div>
          </el-col>

          <el-col :span="6">
            <div class="grid-content bg-purple">
               <el-select v-model="form.sampleRate" placeholder="请选择采样间隔">
                <el-option
                  v-for="item in sampleRate_list"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </div>
          </el-col>

          <el-col :span="6">
            <div class="grid-content bg-purple">
              <el-select v-model="form.sample" placeholder="请选择采样方式">
                <el-option
                  v-for="item in sample_list"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </div>
          </el-col>
        </el-row>

        <div>
          <el-button style="margin-top: 5px;" @click="change" >完成</el-button>
        </div>
      </el-form>
    </div>

  </div>
</template>

<script>
  export default {
    name: "getEarthData",
    data () {
      return {
        center: {lng: 109.45744048529967, lat: 36.49771311230842},//中心点
        zoom: 5,                      //地图级别
        drawingManager:null,          //鼠标绘图工具
        overlays: [],                 //绘制覆盖物
        // drawingModeType:null,
        points:[],    //测试数据点
        StationArr:{
          longtitude:null,
          latitude:null,
          stationID:null,
          stationName:null,
        },    //台站信息

        form:{
          sample:null,
          sampleRate:null,
        },
        sample_list: [{
          value: '1',
          label: '平均数'
          }, {
            value: '2',
            label: '最大值'
          }, {
            value: '3',
            label: '最小值'
          },{
            value: '4',
            label: '中位数'
          },{
            value: '5',
            label: '最后一个值'
        }],

        sampleRate_list: [{
          value: '0',
          label: '1次每秒'
          }, {
            value: '1',
            label: '1次每分钟'
          }, {
            value: '2',
            label: '1次每小时'
          },{
            value: '3',
            label: '1次每天'
          },{
            value: '4',
            label: '1次每周'
          },{
            value: '5',
            label: '1次每月'
        },{
            value: '6',
            label: '1次每季度'
        },{
            value: '7',
            label: '1次每年'
        }],

        pickerOptions: {
          disabledDate(time) {
            return time.getTime() > Date.now();
          },
          shortcuts: [{
            text: '今天',
            onClick(picker) {
              picker.$emit('pick', new Date());
            }
          }, {
            text: '昨天',
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24);
              picker.$emit('pick', date);
            }
          }, {
            text: '一周前',
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', date);
            }
          }]
        },

        //绘制样式
        styleOptions : {
          strokeColor:"yellow",    //边线颜色。
          fillColor: "lightyellow",      //填充颜色。当参数为空时，圆形将没有填充效果。
          strokeWeight: 3,       //边线的宽度，以像素为单位。
          strokeOpacity: 0.8,	   //边线透明度，取值范围0 - 1。
          fillOpacity: 0.6,      //填充的透明度，取值范围0 - 1。
          strokeStyle: 'solid' //边线的样式，solid或dashed。
        },

        value1: '',
        value2: '',
        timepoint:'',
      }
    },

    methods: {
      //初始化地图，获取台站数据
      handler ({BMap, map}) {
        //获取台站数据
        this.obtainData(map),

        //实例化鼠标绘制工具
        this.drawingManager = new BMapLib.DrawingManager(map, {
          isOpen: false, //是否开启绘制模式
          enableDrawingTool: true, //是否显示工具栏

          //工具栏形状
          drawingToolOptions: {
            anchor: BMAP_ANCHOR_TOP_RIGHT, //位置
            offset: new BMap.Size(5, 5), //偏离值
            drawingModes : [ // 可见的操作选项
                BMAP_DRAWING_CIRCLE,
                BMAP_DRAWING_POLYLINE,
                BMAP_DRAWING_POLYGON,
                BMAP_DRAWING_RECTANGLE,
            ]
          },
          circleOptions: this.styleOptions, //圆的样式
          polylineOptions: this.styleOptions, //线的样式
	        polygonOptions: this.styleOptions, //多边形的样式
          rectangleOptions: this.styleOptions //矩形的样式
        });
        // console.log(this.points.length)
        //添加鼠标绘制工具监听事件，用于获取绘制结果
        this.drawingManager.addEventListener('overlaycomplete', this.overlaycomplete);
      },

      //测试数据
      obtainData(map){
        const points = [];
        if (document.createElement('canvas').getContext) {
          for (var i = 0; i < 3000; i++) {
            this.StationArr.longtitude = this.center.lng + 2 * (Math.random() * 0.7);
            this.StationArr.latitude = this.center.lat - 2 * (Math.random() * 0.7);
            this.StationArr.stationID = 10000 + i;
            this.StationArr.stationName = "台站" + i;
            var point = new BMap.Point(this.StationArr.longtitude, this.StationArr.latitude);
            this.points.push(point)
          }

          var options = {
              size: BMAP_POINT_SIZE_SMALL,
              shape: BMAP_POINT_SHAPE_WATERDROP,
              color: '#d340c3'
           }
          // console.log(this.points.length)
          var pointCollection = new BMap.PointCollection(this.points, options);  // 初始化PointCollection
          pointCollection.addEventListener('click', function (e) {
            alert('单击点的坐标为：' + e.point.lng + ',' + e.point.lat);  // 监听点击事件
          });
          map.addOverlay(pointCollection);  // 添加Overlay
        }else{
          alert('请在chrome、safari、IE8+以上浏览器查看本示例');
        }
      },

      overlaycomplete(e){
        //将绘制图层加入数组
        this.overlays.push(e.overlay);
        console.log(this.overlays.length);

        var cirCount = 0;
	      var polyCount = 0;
        this.drawingManager.close();		//关闭画图

        var drawingModeType = e.drawingMode;	//获取所画图形类型
        console.log(drawingModeType);

        this.points.forEach(function(value) {
          consloe.log(value)

          if (drawingModeType == "circle") {
            //圆
            if(BMapLib.GeoUtils.isPointInCircle(value, e.overlay)) {
              this.cirCount++;
            }
          } else if (drawingModeType == "rectangle" || drawingModeType == "polygon") {
            //矩形  或  多边形
            if(BMapLib.GeoUtils.isPointInPolygon(value, e.overlay)) {
              this.polyCount++;
            }
          }
        });
        alert("圆中包含"+this.cirCount+"个定位点，多边形或矩形中包含"+this.polyCount+"个定位点。");
      },

      change(){},
    }
  }
</script>

<style scoped>
  #container1{
    height: calc(100vh - 50px);
  }
  .container-cont{
    height: 80%;
    width:100%;
    display: flex;
  }
  #myMap{
    flex: 6;
  }
  #myInfo{
    flex:4;
    background: #36A5BC
  }
  #mySel{
    height: 20%;
    width:100%;
    background: #FFFFFF
  }
  .el-row {
    margin-bottom: 20px;
    .el-row:last-child {
      margin-bottom: 0;
    }
  }
  .el-col {
    border-radius: 4px;
  }

  .bg-purple-dark {
    background: #99a9bf;
  }
  .bg-purple {
    background: #d3dce6;
  }
  .bg-purple-light {
    background: #e5e9f2;
  }
  .grid-content {
    border-radius: 4px;
    min-height: 36px;
  }
  .row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
  }

</style>
